<template>
	<div class="hello" :class="[showbackimg]">
		<el-cascader :options="options" :props="addressprop" clearable v-model="address" @change="onFinish">
		</el-cascader>
		<div style="color: rgb(255, 255, 255);position: absolute;left: 50%;margin-left: -450px;top: 35%;width: 900px;">
			<div class="leftdiv">
				<p>&nbsp;&nbsp;&nbsp;&nbsp;湿度:{{weather.hum}}</p>
				<p>摄氏度:{{weather.tmp}}</p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;天气:{{weather.cond.txt}}</p>
			</div>
			<div class="centerdiv">
				<img src="../assets/img/duoyun.png" v-show="showicon == '多云'" alt="">
				<img src="../assets/img/qing.png" v-show="showicon == '晴'" alt="">
				<img src="../assets/img/yin.png" v-show="showicon == '阴'" alt="">
				<img src="../assets/img/yu.png" v-show="showicon == '小雨' || showicon == '大雨'" alt="">
				<img src="../assets/img/xue.png" v-show="showicon == '小雪' || showicon == '大雪' " alt="">
				<img src="../assets/img/baofengyu-.png" v-show="showicon == '雷阵雨'" alt="">
			</div>
			<div class="rightdiv">
				<p>{{weather.wind.dir}}:风向&nbsp;&nbsp;&nbsp;&nbsp;</p>
				<p>{{weather.wind.sc}}:风等级</p>
				<p>{{weather.wind.spd}}:风速&nbsp;&nbsp;&nbsp;&nbsp;</p>
			</div>
		</div>
	</div>
</template>

<script>
	import api from "@/api/index.js"
	import $Jquery from 'jquery'
	export default {
		name: 'Weather',
		created() {},
		computed: {
			showicon() {
				return this.weather.cond.txt;
			},
			showbackimg() {
				return this.weather.cond.txt == '多云' ? 'duoyun' : this.weather.cond.txt == '晴' ? 'qingtian' : this.weather
					.cond.txt == '阴' ? 'yintian' : this.weather.cond.txt.indexOf('雨') != -1 ? 'xiaoyu' : this.weather.cond
					.txt.indexOf('雪') != -1 ? 'xiaoxue' : this.weather.cond.txt == '雷阵雨' ? 'leizhenyu' : ''
			}
		},
		mounted() {
			let _this = this;
			$Jquery.ajax({
				type: 'get',
				url: './static/json/juheCity.json',
				dataType: 'json',
				async: false,
				success(res) {
					console.log(res.result);
					_this.options = res.result;
				},
				error(exp) {
					console.log(exp)
				}
			})
		},
		methods: {
			onFinish() {
				if (this.address.length == 2) {
					//console.log(this.address);
					api.getweatherJson1({
						params: this.address[1]
					}).then(res => {
						//console.log(res);
						if (res.data.msg == "查询成功") {
							this.weather = res.data.result.HeWeather5[0].now
						} else {
							this.address = "";
							this.weather = {
								cond: {
									code: "",
									txt: ""
								},
								hum: "",
								tmp: "",
								wind: {
									deg: "",
									dir: "",
									sc: "",
									spd: ""
								}
							}
							alert(res.data.msg);
						}
					}).catch(error => {
						console.log(error);
					})
				} else {
					this.weather = {
						cond: {
							code: "",
							txt: ""
						},
						hum: "",
						tmp: "",
						wind: {
							deg: "",
							dir: "",
							sc: "",
							spd: ""
						}
					}
				}
			}
		},
		data() {
			return {
				weather: {
					cond: {
						code: "",
						txt: ""
					},
					hum: "",
					tmp: "",
					wind: {
						deg: "",
						dir: "",
						sc: "",
						spd: ""
					}

				},
				address: "",
				addressprop: {
					label: 'text',
					value: 'text',
					children: 'children'
				},
				options: []
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.hello {
		width: 100%;
		height: 100%;
		background-position: center;
		background-image: url('../assets/img/bg.jpeg');
		background-repeat: no-repeat;
		background-size: cover;
		background-color: rgba(0, 0, 0, 0.2);
		background-blend-mode: color;

		.leftdiv {
			width: 300px;
			position: absolute;
			left: 0px;
			top: 30px;
		}

		.centerdiv {
			width: 300px;
			position: absolute;
			left: 300px;
			text-align: center;
		}

		.rightdiv {
			width: 300px;
			position: absolute;
			left: 600px;
			top: 30px;
			text-align: right;
		}
	}

	.duoyun {
		background-image: url('../assets/img/gft.gif');
	}

	.qingtian {
		background-image: url('../assets/img/qt.gif');
	}

	.yintian {
		background-image: url('../assets/img/yt.gif');
	}

	.xiaoyu {
		background-image: url('../assets/img/yyt.gif');
	}

	.xiaoxue {
		background-image: url('../assets/img/xiaxue.gif');
	}

	.leizhenyu {
		background-image: url('../assets/img/dl.gif');
	}

	.el-cascader {
		left: 50%;
		margin-left: -150px;
		top: 30%;
		width: 300px;
	}
</style>
